<template>
    <div>
    <p class="denglu">登 录</p>
    <div class="btn">
        <img src="../../assets/img/bin.png" alt="">
        <span>微信登录</span>
    </div>
    <p class="qi">其他方式登录</p>
    <ul>
        <li><a href="#"><img src="../../assets/img/a6e.png" alt=""><p>QQ登录</p></a></li>
        <li><a href="#"><img src="../../assets/img/a68.png" alt=""><p>免密登录</p></a></li>
        <li><a href="#"><img src="../../assets/img/a67.png" alt=""><p>账号登录</p></a></li>
    </ul>
    <a href="#" class="new">新人注册</a>
    </div>
</template>
<script type="text/ecmascript-6">

    export default {}
</script>
<style scoped>
    .denglu{
        margin: 0.7rem auto;
        font-size: 30px;
        text-align: center;
    }
    .btn{
        width: 80%;
        height: 0.5rem;
        font-size: 20px;
        color: white;
        line-height: 0.5rem;
        text-align: center;
        background-color: #09BB07;
        border-radius: 50px;
        margin: 0 auto;
    }
    .btn img{
        width: 0.3rem;
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.1rem;
    }
    .qi{
        font-size: 18px;
        color: #999999;
        margin: 0.7rem auto;
        width: 0.2rem;
        border-top:1px solid #999999;
        padding-top: 0.4rem;
        white-space: nowrap;
        text-indent: -0.4rem;
    }
    ul{
        width: 100%;
        display: flex;
        justify-content: space-around;

    }
    ul li{
        text-align: center;
    }
    ul li img{
        width:0.5rem;
        margin: 0 0 0.1rem 0;
    }
    ul li a{
        font-size: 14px;
        color: #8B8B8B;
        display: block;
        width: 100%;
    }
    .new{
        margin-top: 1rem;
        width: 100%;
        color: #FF5777;
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        border-top: 1px solid #EBEBEB;
        font-size: 14px;
        display: block;
    }
</style>